<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />

        <!-- Base Css Files -->
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/jqueryui/ui-lightness/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/fontello/css/fontello.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/animate-css/animate.min.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/nifty-modal/css/component.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/magnific-popup/magnific-popup.css" rel="stylesheet" /> 
        <link href="__PUBLIC__/statics/coco-chat/assets/css/style.css" rel="stylesheet" type="text/css" />
        <link href="__PUBLIC__/statics/coco-chat/assets/css/style-responsive.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/pace/pace.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/jquery-notifyjs/styles/metro/notify-metro.css" rel="stylesheet" type="text/css" />
        
        <!-- Extra CSS Files -->
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/bootstrap-select/bootstrap-select.min.css" rel="stylesheet" type="text/css" />
        
        <!-- Custom Css Files -->
        <link href="__ADMIN_CSS__/style.css"  rel="stylesheet" />
    </head>
    <body>
    
    <div>
        <div class="sub-header-title">
            <h2>订单列表</h2>
        </div>
        
        <form method="post" id="order-form" class="form-horizontal" action="{:U('Mall/orderList')}">
          <div class="form-group">
              <div class="col-sm-2">
                <select class="form-control selectpicker" name="status" id="order_status">
                      <option value="-1">全部订单</option>
                      <option value="0" <if condition="$status eq '0'">selected</if>>已下单</option>
                        <option value="1" <if condition="$status eq '1'">selected</if>>已确认</option>
                        <option value="2" <if condition="$status eq '2'">selected</if>>已驳回</option>
                  </select>
              </div>
          <div class="col-sm-2">
              <div class="input-group">
                      <span class="input-group-addon">日期</span>
                      <input type="text" class="form-control" id="date-start" name="start_date" value="{$start_date}" placeholder="开始日期"/>
                  </div>
              </div>
              <div class="col-sm-2">
                <div class="input-group">
                      <span class="input-group-addon">-</span>
                      <input type="text" class="form-control" id="date-end" name="end_date" value="{$end_date}" placeholder="截止日期"/>
                  </div>
            </div>
            <div class="col-sm-2">
                  <input class="form-control" placeholder="根据会员编号或订单号搜索" value="{$keyword}"  id="keyword" name="keyword" type="text">
              </div>
              <div class="col-sm-2">
                  <button class="btn btn-success" type="submit">查询</button>
              </div>
              <div class="col-sm-2">
                    <button class="btn btn-success pull-right" id='export-excel' onclick="return false;">导出订单</button>
                </div>
          </div>
        </form>
    </div>
    <div class="widget">
        <div class="widget-content">                            
           <table id="user" class="table table-bordered table-striped order-table" style="clear: both">
                <thead>
                    <tr>
                        <th>商品</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>小计</th>
                    </tr>
                </thead>
                <tbody>
          <volist name="list" id="vo">
                      <tr class="no-data"><td colspan="4"></td></tr>
                      <tr>
                        <td colspan="4" class="text-center">
                              <span class="pull-left">
                                下单人：{$vo['user_no']}&nbsp;&nbsp;
                                下单时间：{$vo['add_time']}&nbsp;&nbsp;
                                订单号：<a href="{:U('Mall/orderDetail',array('order_no'=>$vo['order_no']))}">{$vo['order_no']}</a>&nbsp;&nbsp;
                                订单总计：<if condition="$vo['total'] GT 0">{$currency_symbol}{$vo['total']}&nbsp;&nbsp;</if>
                            </span>
                              <span class="pull-right">
                                  订单状态：
                                  <switch name="vo.status">
                        <case value="0">
                        <a class="confirm-order" href="javascript:;" data-id="{$vo['id']}">确认</a> | <a class="reject-order" data-id="{$vo['id']}" href="javascript:;">驳回</a>
                        </case>
                        <case value="1"><span class="green">已确认</span></case>
                        <case value="2"><span class="red">已驳回</span></case>
                        <default />未知
                    </switch>
                              </span>
                          </td>
                    </tr>
            <volist name="vo['goods']" id="goods">
                      <tr>
                          <td>
                              <a href="{:U('Mall/detail',array('id'=>$goods['goods_id']))}">
                                    <img width="80" height="80" src="{$goods['pic_url']}"/>
                                </a>
                                <a href="{:U('Mall/detail',array('id'=>$goods['goods_id']))}">
                                    <span style="margin-left: 20px;">{$goods['title']}</span>
                                </a>
                            </td>
                            <td>
                              <if condition="$goods['price'] GT 0">{$currency_symbol}{$goods['price']}<br/></if>
                            </td>
                            <td class="text-center">{$goods['quantity']}</td>
                            <td>
                              <if condition="$goods['subtotal'] GT 0">{$currency_symbol}{$goods['subtotal']}<br/></if>
                            </td>
                        </tr>
                        </volist>
                  </volist>
              </tbody>
            </table>
          {$page}
      </div> 
  </div> 

  <!-- Base Js Files -->
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery/jquery-1.11.1.min.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/bootstrap/js/bootstrap.min.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/jqueryui/jquery-ui-1.10.4.custom.min.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-ui-touch/jquery.ui.touch-punch.min.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-detectmobile/detect.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/fastclick/fastclick.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-slimscroll/jquery.slimscroll.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/nifty-modal/js/classie.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/nifty-modal/js/modalEffects.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-notifyjs/notify.min.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-notifyjs/styles/metro/notify-metro-blue.js"></script>
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/pace/pace.min.js"></script>
  
  <!-- Extra Js Files -->
  <script src="__PUBLIC__/statics/coco-chat/assets/libs/bootstrap-select/bootstrap-select.min.js"></script>
    <script src="__PUBLIC__/statics/coco-chat/assets/libs/bootstrap-select2/select2.min.js"></script>
    <script src="__PUBLIC__/statics/coco-chat/assets/libs/laydate/laydate.js"></script>
  
  <!-- Custom Js Files -->
  <script src="__ADMIN_JS__/common.js"></script>

  <script>
      var start = {
          elem: '#date-start', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
        event: 'focus', //响应事件。如果没有传入event，则按照默认的click
        max: laydate.now(), //最大日期
          choose: function(datas){
            end.min = datas; //开始日选好后，重置结束日的最小日期
            end.start = datas //将结束日的初始值设定为开始日
          }
      };
      var end = {
          elem: '#date-end', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
        event: 'focus', //响应事件。如果没有传入event，则按照默认的click
        max: laydate.now(), //最大日期
          choose: function(datas){
            start.max = datas; //结束日选好后，重置开始日的最大日期
          }
      };
      laydate(start);
      laydate(end);

      //SELECT
    $('.selectpicker').selectpicker();
  
    //导出excel
        $('#export-excel').click(function(){
        window.parent.layer.confirm('确认导出所有数据？',{
            btn: ['确认','取消'], //按钮
          },function(index){
            window.open("{:U('Mall/export')}"+"?"+$('#order-form').serialize());
            window.parent.layer.close(index);
        });
        });
    
        //确认订单
    $('.confirm-order').click(function(){
      var id = $(this).data("id");
          window.parent.layer.prompt({
              title: '确认订单，请认真填写物流公司和物流单号', 
                formType: 2,
                btn: ['确认','取消'], //按钮
            },function(operate_remark, index){
              if (!operate_remark) {
                //弹出提示
            window.parent.layer.msg("请认真填写物流公司和物流单号");
                return false;
              }
              if (operate_remark.length<2 || operate_remark.length>100) {
                //弹出提示
            window.parent.layer.msg("物流信息必须在2~100个字符之间");
                return false;
              }
              var data = {
                        'operate_remark'  : operate_remark,
                        'id'        : id
                };
              
              // 用ajax提交表单
            $.post("{:U('Mall/confirmOrder')}", data, function(response) {
              //弹出提示
          window.parent.layer.msg(response.message);
              
              //根据请求相应状态提示通知
              if(response.status){
                notify("success",response.message);
            window.location.reload();
          }else{
            notify("error",response.message);
          }
            }, 'json');
            window.parent.layer.close(index);
      });
    });

    //驳回订单
    $('.reject-order').click(function(){
      var id = $(this).data("id");
          window.parent.layer.prompt({
              title: '驳回订单，请认真填写驳回原因', 
                formType: 2,
                btn: ['确认','取消'], //按钮
            },function(operate_remark, index){
              if (!operate_remark) {
                //弹出提示
            window.parent.layer.msg("请认真填写驳回原因");
                return false;
              }
              if (operate_remark.length<2 || operate_remark.length>100) {
                //弹出提示
            window.parent.layer.msg("驳回原因必须在2~100个字符之间");
                return false;
              }
              
              var data = {
                        'operate_remark'  : operate_remark,
                        'id'        : id
                };
              // 用ajax提交表单
            $.post("{:U('Mall/rejectOrder')}", data, function(response) {
              //弹出提示
          window.parent.layer.msg(response.message);
              
              //根据请求相应状态提示通知
              if(response.status){
                notify("success",response.message);
            window.location.reload();
          }else{
            notify("error",response.message);
          }
            }, 'json');
            window.parent.layer.close(index);
      });
    });
  </script>
  </body>
</html>